<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript字符串工具类</title>
<script type="text/javascript" src="../js/jquery/jquery.js"></script>
<script type="text/javascript" src="../js/tools/string/StringUtil.js"></script>
<style type="text/css">
.ellipsis { width: 500px; height: 60px; border: 1px green solid; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; }
</style>
<script type="text/javascript">
function stringClick(){
	var subIndex = $("#subIndex").val();
	var content = $("#content");
	var string = $("#stringContent").val();
	string = string.substring(0, subIndex);
	content.html(string);
}

//补全
function stringCompClick() {
	var subIndex = $("#subIndex").val();
	var content = $("#content");
	var string = $("#stringContent").val();
	string = stringUtil.subString(string, 0, subIndex);
	content.html(string);
}
</script>
</head>
<body>
	<div>字符串处理: <textarea id="stringContent" name="stringContent" contenteditable="false" rows="5" cols="50">abcd<a href="#">测试的</a>hehe是的</textarea></div>
	显示内容:
	<div id="content"></div>
	<div>
		截取位置: <input type="text" id="subIndex" value="8"/>
		<input type="button" onclick="$('#subIndex').val(this.value);" value="8"/>
		<input type="button" onclick="$('#subIndex').val(this.value);" value="19"/>
		<input type="button" onclick="$('#subIndex').val(this.value);" value="21"/>
	</div>
	<div>
		<input type="button" onclick="stringClick();" value="执行"/>
		<input type="button" onclick="stringCompClick();" value="执行补全"/>
	</div>
	<div class="ellipsis">
		省略的文字省略的文字省略的文字省略的文字省略的文字省略的文字省略的文字省略的文字省略的文字省略的文字省略的文字省略的文字省略的文字省略的文字省略的文字
		省略的文字省略的文字省略的文字省略的文字省略的文字省略的文字省略的文字省略的文字省略的文字省略的文字省略的文字省略的文字省略的文字省略的文字省略的文字
	</div>
	<div class="ellipsis">
		强制换行强制换行强制换行强制换行强制换行强制换行强制换行<br>强制换行强制换行强制换行强制换行强制换行强制换行强制换行强制换行强制换行强制换行强制换行
		强制换行强制换行强制换行强制换行强制换行强制换行强制换行强制换行强制换行强制换行强制换行强制换行强制换行强制换行强制换行强制换行强制换行强制换行
	</div>
</body>
</html>